<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-3.6.0.js"></script>
	<script src="../js/loan.js"></script>
	<link href="../css/style.css" rel="stylesheet" type="text/css">
    <link rel="../stylesheet" href="/js/jquery-ui-1.13.2.custom/jquery-ui.min.css">
    <script src="../js/jquery-ui-1.13.2.custom/jquery-ui.min.js"></script>
    <title>房贷计算</title>
</head>

<body>
	<div class="nav">
	    <a class="nav-lsize" href="main.html" style="font-size: 18px; color: #000000;">房贷计算器</a>
        <a class="nav-lsize" href="Calculator (function).html">计算器（函数）</a>
        <a class="nav-lsize" href="Calculator (object).html">计算器（对象）</a>
	    <a class="nav-rsize" href="register.html">注册</a>
	    <a class="nav-rsize" href="login.html">登录</a>
	</div>

    <div class="container-main" >
		<div class="wrapper-main" id="wrapper-main">

			<div class="header">房贷计算器</div>
			<div style="width: 45%; float: left;">
				<input type="text" placeholder="商业贷款:(万元)" class="input-item" id="businessLoans">
				<input type="text" placeholder="贷款期限:(年)" class="input-item" id="loanTerm">
				<input type="text" placeholder="商业贷款年利率:(%)" class="input-item" id="annualRate">
                <p style="font-size:larger">买房日期：<input type="text" id="datepicker"></p><br>

				计算方式：<input type="radio" class="submitText" name="loanMethod" checked="true">等额本息
				<input type="radio" class="submitText" name="loanMethod">等额本金

				<input type="button" value="计算房贷" class="btn-main" onclick="Compute()">
			</div>

            <div  id="wrapper-result">
                <div style="width: 45%; float: right;" id="result">
                    <select class="input-item" name="everyIssuePayment" id="monthlyPayment" disabled="true">
                        <option value="">每月还本付息金额</option>
                    </select>
                    <!-- <input type="text" placeholder="每期还本付息金额" class="input-item" id="monthlyPayment" readonly="readonly"> -->
                    <select class="input-item" name="everyIssuePrincipal" id="monthlyPrincipal" disabled="true">
                        <option value="">每期本金</option>
                    </select>
                    <select class="input-item" name="everyIssueInterest" id="monthlyInterest" disabled="true">
                        <option value="">每期利息</option>
                    </select>
                    <input type="text" value="还款总利息" class="input-item" id="totalInterest" readonly="readonly" style="width: 88%;">
                    <input type="text" value="还款总额" class="input-item" id="totalRepayment" readonly="readonly" style="width: 88%;">
                </div>
            </div>

		</div>
    </div>

</body>
</html>
